<!-- 轮播图 -->
<template>
  <div class="upload content-box">
    <!-- 多图上传 -->
    <div class="card img-box">
      <span class="text"> 🍓🍇轮播图🍈🍉</span>
      <div class="upload-list">
        <UploadImgs v-model:file-list="fileList" width="250px">
          <template #empty>
            <el-icon><Picture /></el-icon>
            <span>请上传照片</span>
          </template>
          <template #tip> 最大上传五张 </template>
        </UploadImgs>
      </div>

      <el-button type="primary" @click="_updateCarouseMap"> 保存配置 </el-button>
    </div>
  </div>
</template>

<script setup lang="ts" name="uploadFile">
import { ref, reactive, onMounted } from "vue";
import { FormInstance } from "element-plus";
import UploadImgs from "@/components/Upload/Imgs.vue";
import { getCarouseMap, updateCarouseMap } from "@/api/modules/allApi";
import { ElNotification } from "element-plus";

const fileList = ref();
onMounted(async () => {
  const { data } = await getCarouseMap();
  fileList.value = data;
});
const _updateCarouseMap = async () => {
  const { code } = await updateCarouseMap(fileList.value);
  if (code === 0) {
    ElNotification({
      title: "温馨提示",
      message: "保存成功！",
      type: "success"
    });
  }
};
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
